<template>


  <el-dialog class="abow_dialog"
             :close-on-click-modal="false"
             :modal-append-to-body="appendToBody"
             :append-to-body="true"
             title="业务列表查询"
             width="75%"
             top="10vh"
             :visible.sync="visible"
             @close="$emit('update:singleShow', false)"
             :show="singleShow">
    <div>
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="名称">
          <el-input v-model="queryForm.modelName" clearable></el-input>
        </el-form-item>
        <el-form-item label="表名">
          <el-input v-model="queryForm.tableName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <Row>

        <Col span="22" class="no-padding border-bottom border-right boder-margin">
          <Table  highlight-row ref="selection" height="450" @on-select-cancel="cancelSelectionChange"
                 :columns="tableColumns" :data="tableData" style="padding-left: 10px;padding-top: 10px"></Table>
          <Page ref="pages" :total="userTotal" show-elevator @on-change="changePanelUser" style="margin-top: 3px"/>
          <!--          @on-change="changePanelUser"-->
        </Col>
      </Row>

    </div>
    <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="confirmDialog">确 定</el-button>
    <el-button @click="visible = false">取 消</el-button>

  </span>
  </el-dialog>
</template>

<script>
  import { getBusinessTableListJson } from '@/api/form'

  export default {
    methods: {
      mount() {
      },
      created() {
      },
      resetQuery:function(){
        this.queryForm.modelName = ""
        this.queryForm.tableName = ""
        this.queryForm.page=1
      },
      reset: function () {
        this.resetQuery();
        this.getAllBus();
      },
      search: function () {
        this.getAllBus();
      },
      changePanelUser: function (page) {
        this.queryForm.page = page;
        this.getAllBus();
      },
      cancelSelectionChange: function (selection, row) {
        this.showTableData = existData;

      },
      operateTable: function (selection) {
        var array = this.showTableData.concat(selection)
        var newArray = this.unique(array);
        this.showTableData = newArray;
      },
      selectionOnChange: function (selection, row) {
        this.operateTable(selection)
      },
      unique(arr) { // 根据唯一标识no来对数组进行过滤
        const res = new Map();  //定义常量 res,值为一个Map对象实例
        //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
        return arr.filter((arr) => !res.has(arr.tableKey) && res.set(arr.tableKey, 1))
      },
      remove(userNo) { // 根据唯一标识no来对数组进行过滤
        const res = new Map();  //定义常量 res,值为一个Map对象实例
        //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
        return this.showTableData.filter((arr) => !(arr.tableKey == userNo))
      },
      exist(tableKey) { // 根据唯一标识no来对数组进行过滤
        //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
        return this.showTableData.tableKey==tableKey
      },

      selectAll: function (selection) {
        this.operateTable(selection)
        this.curentTableData=selection;
      },
      selectAllCancel: function (selection, row) {

        var select=  this.$refs.selection.data
        for (var i = 0; i < select.length; i++) {
          this.showTableData = this.remove( select[i].tableName)
        }
      },
      getAllBus: function () {
        getBusinessTableListJson(this.queryForm).then((response) => {
          if (response.code == 0) {
            this.tableData = response.data;

            this.userTotal = parseInt(response.count);
            this.$nextTick(() => {
              var objData=  this.$refs.selection.$refs.tbody.objData;
              var leftData=[];
              for(var obj in objData){
                leftData.push(objData[obj])
              }
              if (leftData){
                for (var i = 0; i <leftData.length ; i++) {
                  if (this.exist(leftData[i].tableName)){
                    this.$refs.selection.$refs.tbody.objData[i]._isChecked = true;
                    break
                  }
                }
              }


            })
          }

        })
      },
      confirmDialog() {

        if (this.onOk) {
          this.visible = false
          this.onOk(this.currentChooseUser);
        }
      },
      changePanel: function (data) {
      }
    },
    data() {

      return {
        visible: this.singleShow,
        appendToBody:false,
        curentTableData: [],
        index: 1,
        roleDefaultProps: {
          children: 'childList',
          label: 'name'
        },
        orgDefaultProps: {
          children: 'children',
          label: 'deptName'
        },
        positionDefaultProps: {
          children: 'children',
          label: 'posName'
        },
        activiteCode: "",
        serviceVal: '',
        activePanel: '',
        tableHeight: 420,
        tableMinHeight: 484,
        userTotal: 0,
        currentChoose: '',
        currentChooseUser: {},
        orgModel: '',
        positionModel: '',
        roleData: [],
        orgData: [],
        positionDemension: [],
        orgDemension: [],
        queryForm: {
          page: 1,
          length: 10,
          modelName: "",
          tableName: "",
        },
        showTableColumns: [
          {
            title: '姓名',
            key: 'fullname'
          },
          {
            title: '操作', //
            key: 'id', //
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    icon: "ivu-icon-ios-trash",
                  },
                  style: {
                    display: 'flex',
                    'justify-content': 'center',
                  },
                  on: {
                    click: (index, data) => {
                      this.showTableData.splice(params.index, 1)
                      this.$nextTick(() => {
                        var objData=  this.$refs.selection.$refs.tbody.objData;
                        var leftData=[];
                        for(var obj in objData){
                          leftData.push(objData[obj])
                        }
                        for (var i = 0; i <leftData.length ; i++) {
                          if (leftData[i].tableName==params.row.tableName) {
                            this.$refs.selection.$refs.tbody.objData[i]._isChecked = false;

                            break
                          }

                        }

                      })

                    },
                  },
                }, '删除'),
              ]);
            },
          },
        ],

        tableColumns: [
          {
            title: '选择',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let id = params.row.id;
              let flag = false;
              if (this.currentChoose === id) {
                flag = true
              } else {
                flag = false
              }

              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      this.currentChooseUser = params.row;
                      this.currentChoose = params.row.id;
                    }
                  }
                })
              ])
            }
          },



          {
            title: '名称',
            key: 'modelName'
          },
          {
            title: '表名',
            key: 'tableName'
          },
          {
            title: '分类',
            key: 'groupName'
          },
          {
            title: '类型',
            key: 'type',
            render: (h, params) => {
              if(params.row.type=='inner'){
                return h("div",{
                  style: {
                    display: "inline-block"
                  }
                },[
                  h("Tag",{
                    props: {
                      color: "primary",
                    },
                  },params.row.type=='inner'?"内部":"外部" ),
                ]);
              }else{
                return h("div",{
                  style: {
                    display: "inline-block"
                  }
                },[
                  h("Tag",{
                    props: {
                      color: "success",
                    },
                  },params.row.type=='inner'?"内部":"外部" ),
                ]);
              }

            }

      }
        ],
        tableData: [],
        showTableData: [],
      };
    },
    mount() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    props: {
      singleShow: {
        type: Boolean,
        default: false
      },
      onOk: {    //定义onOK属性
        type: Function
      },
      existData: {
        type: Object,
        default: () => ({})

      },

    },
    watch:{
      // singleShow : (n ,o) => {//箭头函数  不然会发生this改变
      // }
      // ,
      singleShow() {
        //分页初始化为第一页
        this.$nextTick(function(){
          this.$refs['pages'].currentPage = 1;
        })
        if (this.singleShow) {

          if (this.existData && this.existData.tableKey){
            this.currentChoose=this.existData.tableKey
            this.currentChooseUser=this.existData
            this.showTableData=this.existData

          }else{
            this.currentChoose=""
            this.currentChooseUser={}
          }
          this.getAllBus()
        }else{
          this.resetQuery();
        }
        this.visible = this.singleShow;
        }


    }
  };
</script>
<style lang="scss">

</style>
